<template>
    <div>
        <!-- 始终显示在左下角的日志图标按钮，调整为更小的尺寸 -->
        <div class="log-icon-button" @click="toggleLogVisibility" title="调试日志">
            <IconLog />
        </div>

        <!-- 日志面板，仅在可见时显示 -->
        <div class="info-card log-display" v-if="localVisible">
            <h2 class="card-title">
                <div class="log-buttons">
                    <button class="log-btn log-copy-btn" @click="copyLogs" title="复制日志">
                        复制
                    </button>
                    <button class="log-btn log-clear-btn" @click="clearLogs" title="清除日志">
                        清除
                    </button>
                    <button
                        class="log-btn log-close-btn"
                        @click="toggleLogVisibility"
                        title="关闭日志"
                    >
                        关闭
                    </button>
                </div>
                <span>程序日志</span>
            </h2>
            <div class="log-container" :class="{ 'log-expanded': isLogExpanded }">
                <div v-for="(log, index) in logs" :key="index" class="log-item">
                    <span class="log-time">{{ log.time }}</span>
                    <span class="log-content">{{ log.content }}</span>
                </div>
                <div v-if="logs.length === 0" class="log-empty">暂无日志</div>
            </div>
            <!-- 复制成功提示 -->
            <div class="copy-toast" v-if="showCopyToast">日志已复制到剪贴板</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits, watch } from 'vue'
import IconLog from './icons/IconLog.vue'

interface Log {
    time: string
    content: string
}

const props = defineProps<{
    logs: Log[]
    visible: boolean
}>()

const emit = defineEmits<{
    'clear-logs': []
    'update:isLogExpanded': [boolean]
    'update:visible': [boolean]
}>()

const isLogExpanded = ref(false)
const localVisible = ref(props.visible)
const showCopyToast = ref(false)

// 监听外部visible属性变化
watch(
    () => props.visible,
    (newValue) => {
        localVisible.value = newValue
    },
)

// 清除日志
const clearLogs = () => {
    emit('clear-logs')
}

// 切换日志展开状态
const toggleLogExpand = () => {
    isLogExpanded.value = !isLogExpanded.value
    emit('update:isLogExpanded', isLogExpanded.value)
}

// 切换日志可见性
const toggleLogVisibility = () => {
    localVisible.value = !localVisible.value
    emit('update:visible', localVisible.value)
}

// 复制日志内容到剪贴板
const copyLogs = () => {
    if (props.logs.length === 0) {
        showToast()
        return
    }

    // 格式化日志内容
    const logText = props.logs.map((log) => `[${log.time}] ${log.content}`).join('\n')

    // 使用navigator.clipboard API复制内容
    navigator.clipboard
        .writeText(logText)
        .then(() => {
            showToast()
        })
        .catch((err) => {
            console.error('复制失败: ', err)
            // 备用方法
            fallbackCopy(logText)
        })
}

// 显示提示信息
const showToast = () => {
    showCopyToast.value = true
    setTimeout(() => {
        showCopyToast.value = false
    }, 2000)
}

// 备用复制方法，当clipboard API不可用时
const fallbackCopy = (text: string) => {
    // 创建一个临时textarea元素
    const textArea = document.createElement('textarea')
    textArea.value = text
    textArea.style.position = 'fixed'
    textArea.style.left = '-999999px'
    textArea.style.top = '-999999px'
    document.body.appendChild(textArea)
    textArea.focus()
    textArea.select()

    try {
        const successful = document.execCommand('copy')
        if (successful) {
            showToast()
        } else {
            console.error('复制失败')
        }
    } catch (err) {
        console.error('复制失败: ', err)
    }

    document.body.removeChild(textArea)
}
</script>

<style scoped>
.info-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 16px;
    margin-bottom: 16px;
    width: 80%;
    max-width: 800px;
    position: fixed;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
}

.card-title {
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
}

.log-buttons {
    display: flex;
    gap: 5px;
}

.log-container {
    max-height: 200px;
    overflow-y: auto;
    background-color: #f5f7fa;
    border-radius: 4px;
    padding: 8px;
}

.log-expanded {
    max-height: 500px;
}

.log-item {
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 4px;
    word-break: break-all;
}

.log-time {
    color: #909399;
    margin-right: 8px;
}

.log-content {
    color: #303133;
}

.log-empty {
    color: #909399;
    text-align: center;
    padding: 16px;
}

.log-btn {
    font-size: 12px;
    padding: 2px 6px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    background: none;
    cursor: pointer;
}

.log-btn:hover {
    color: #409eff;
    border-color: #c6e2ff;
    background-color: #ecf5ff;
}

.log-copy-btn {
    border-color: #67c23a;
    color: #67c23a;
}

.log-copy-btn:hover {
    background-color: #f0f9eb;
    color: #67c23a;
    border-color: #67c23a;
}

/* 日志图标按钮样式 - 减小尺寸 */
.log-icon-button {
    position: fixed;
    left: 5px;
    bottom: 5px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #409eff;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    z-index: 1000;
    transition: all 0.3s ease;
    font-size: 0.8em;
}

.log-icon-button:hover {
    transform: scale(1.1);
    background-color: #337ecc;
}

/* 复制成功提示 */
.copy-toast {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 1001;
}

@media (max-width: 768px) {
    .info-card {
        width: 90%;
        bottom: 70px;
    }

    .log-icon-button {
        left: 10px;
        bottom: 10px;
    }

    .card-title {
        flex-direction: column-reverse;
        align-items: flex-start;
    }

    .log-buttons {
        margin-top: 8px;
        width: 100%;
        justify-content: flex-start;
    }
}
</style>
